"use client";
import {
  List,
  EditButton,
  ShowButton,
  DeleteButton,
  useTable,
} from "@refinedev/antd";
import { Space, Table } from "antd";
import { useEffect, useState } from "react";

export default function NewsList() {
  const [datas, setDatas] = useState<any[]>([]);
  const [total, setTotal] = useState(0);
  const { tableProps, setCurrent, setPageSize, tableQueryResult } = useTable({
    resource: "project/news/list",
    syncWithLocation: true,
  });

  useEffect(() => {
    const res = tableProps?.dataSource as any;
    if (res && res.data) {
      const { list, total } = res.data;
      setDatas(list);
      setTotal(total);
    }
  }, [tableProps?.dataSource]);

  return (
    <List>
      <Table
        dataSource={datas}
        rowKey="id"
        loading={tableProps?.loading}
        pagination={false}
      >
        <Table.Column dataIndex="id" title={"ID"} />
        <Table.Column 
          dataIndex="category_alias" 
          title={"分类别名"} 
          render={(categoryAlias) => 
            categoryAlias ? (
              <span style={{
                backgroundColor: '#f0f0f0',
                padding: '2px 8px',
                borderRadius: '4px',
                fontSize: '12px',
                color: '#666'
              }}>
                {categoryAlias}
              </span>
            ) : (
              <span style={{ color: '#999' }}>未分类</span>
            )
          }
        />
        <Table.Column dataIndex="alias" title={"别名"} />
        <Table.Column 
          dataIndex="url" 
          title={"URL"} 
          render={(url) => 
            url ? (
              <a 
                href={url} 
                target="_blank" 
                rel="noopener noreferrer"
                style={{ color: '#1890ff' }}
              >
                {url.length > 30 ? url.substring(0, 30) + '...' : url}
              </a>
            ) : (
              <span style={{ color: '#999' }}>无链接</span>
            )
          }
        />
        <Table.Column 
          dataIndex="image" 
          title={"图片"} 
          render={(image) => {
            const placeholderStyle = {
              width: 60,
              height: 60,
              backgroundColor: '#f5f5f5',
              border: '1px solid #d9d9d9',
              borderRadius: '4px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: '#999',
              fontSize: '12px',
              textAlign: 'center' as const
            };
            
            return image ? (
              <div style={{ position: 'relative' }}>
                <img 
                  src={image} 
                  alt="新闻图片" 
                  style={{ 
                    width: 60, 
                    height: 60, 
                    objectFit: 'cover',
                    borderRadius: '4px'
                  }} 
                  onError={(e) => {
                    e.currentTarget.style.display = 'none';
                    const nextElement = e.currentTarget.nextElementSibling as HTMLElement;
                    if (nextElement) {
                      nextElement.style.display = 'flex';
                    }
                  }}
                />
                <div style={{ ...placeholderStyle, display: 'none' }}>
                  图片加载失败
                </div>
              </div>
            ) : (
              <div style={placeholderStyle}>
                无图片
              </div>
            );
          }}
        />
        <Table.Column 
          dataIndex="created_at" 
          title={"创建时间"} 
          render={(timestamp) => 
            timestamp ? new Date(timestamp * 1000).toLocaleString('zh-CN') : '-'
          }
        />
        <Table.Column 
          dataIndex="updated_at" 
          title={"更新时间"} 
          render={(timestamp) => 
            timestamp ? new Date(timestamp * 1000).toLocaleString('zh-CN') : '-'
          }
        />
        <Table.Column dataIndex="view" title={"浏览次数"} />
        <Table.Column dataIndex="sort" title={"排序"} />
        <Table.Column 
          dataIndex="recommend" 
          title={"推荐"} 
          render={(recommend) => (
            <span style={{ 
              color: recommend === 1 ? '#52c41a' : '#999',
              fontWeight: recommend === 1 ? 'bold' : 'normal'
            }}>
              {recommend === 1 ? '是' : '否'}
            </span>
          )}
        />
        <Table.Column 
          dataIndex="status" 
          title={"状态"} 
          render={(status) => (
            <span style={{ 
              color: status === 1 ? '#52c41a' : '#ff4d4f',
              fontWeight: status === 1 ? 'bold' : 'normal'
            }}>
              {status === 1 ? '启用' : '禁用'}
            </span>
          )}
        />
        <Table.Column
          title={"操作"}
          dataIndex="actions"
          render={(_, record) => (
            <Space>
              <EditButton hideText size="small" recordItemId={record.id} />
              <ShowButton hideText size="small" recordItemId={record.id} />
              <DeleteButton hideText size="small" recordItemId={record.id} onSuccess={() => {
                tableQueryResult.refetch();
              }} />
            </Space>
          )}
        />
      </Table>
    </List>
  );
} 